<div id="sync_step_1" v-show="sync_step_1" class="panel panel-default" style="float: left;width: 75%" th:fragment="sync_step_1">
    <div class="panel-heading" style="padding: 2px 15px;height: 39px;">
        <div>
            <div style="float: left;padding-top: 7px">第一步【选择数据源】</div>
            <div style="float: right">
                <input type="button" class="btn btn-primary" id="btnSaveOrUpdate" @click="saveOrUpdate" value="保存"/>
                <input type="button" class="btn btn-warning" @click="nextStep('sync_step_2')" value="下一步"/>
            </div>
        </div>
    </div>
    <form class="form-horizontal" style="width: 50%;float: left">
        <div class="trap ribbon-wrap" style="border-bottom:15px solid #00aa32;border-top:15px solid #00aa32">
            <div class="trap-ribbon">
                <a href="#">数据来源<i class="fa fa-github-alt"></i></a>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-1 control-label" style="color: #00a65a">数据源</div>
            <div class="col-sm-10">
                <select id="source_datasource_type" class="form-control" dict:select="" dictType="datasource_type" v-model="sync.sourceDbType" @change="changeSourceDbType" default="--选择数据源类型--">

                </select>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-1 control-label" style="color: #00a65a">来源库</div>
            <div class="col-sm-10">
                <select class="form-control" v-model="sync.sourceDb" @change="changeSourceDb">
                    <option value="" disabled>--选择来源库--</option>
                    <option v-for="option in sourceDbList" v-bind:value="option.id">
                        {{ option.name }}
                    </option>
                </select>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-1 control-label" style="color: #00a65a">来源表</div>
            <div class="col-sm-10">
                <el-select
                    :disabled="showQuerySql && !diySourceShowMongo"
                    style="float: left;width: 70%"
                    v-model="sync.sourceTable"
                    @change="changeSourceTable"
                    filterable
                    placeholder="--选择来源表--">
                    <el-option
                        v-for="option in sourceTableList"
                        :key="option.tableName"
                        :label="option.tableName"
                        :value="option.tableName">
                    </el-option>
                </el-select>


                <label v-show="!isNoSupportSQL(sync.sourceDbType) && !diySourceShowHive" class="checkbox-inline" style="margin-left:5px;float: left;">
                    <input name="querySql" @change="changeQuerySql" type="checkbox"/>
                    自定义SQL
                </label>
                <label v-show="diySourceShowHive" class="checkbox-inline" style="margin-left:5px;float: left;">
                    <input name="diySourceField" @change="changeSourceField" type="checkbox"/>
                    自定义映射字段
                </label>
            </div>
        </div>
        <div v-show="showQuerySql && !diySourceShowMongo && !diySourceShowHive" class="form-group">
            <div class="col-sm-1 control-label" style="color: #00a65a">自定义查询SQL</div>
            <div class="col-sm-10">
                <textarea id="querySqlArea" maxlength="6000" onblur="vm.blurQuerySql(this)" type="text" class="form-control" placeholder="可在当前数据源下组合关联查询SQL语句"></textarea>
            </div>
<!--            <a class="btn btn-primary fa fa-plus" @click="addShowQuerySql"></a>-->
<!--            <a class="btn btn-primary fa fa-trash-o" style="margin-top: 5px" @click="delShowQuerySql"></a>-->
<!--            <div id="template" style="display: none">-->
<!--                <div class="col-sm-1 control-label" style="color: #00a65a"></div>-->
<!--                <div class="col-sm-10">-->
<!--                    <textarea maxlength="6000" onblur="vm.blurQuerySql(this)" type="text" class="form-control" placeholder="可在当前数据源下组合关联查询SQL语句"></textarea>-->
<!--                </div>-->
<!--            </div>-->
        </div>
        <div v-show="diySourceShowHbase" class="form-group">
            <div class="col-sm-1 control-label" style="color: #00a65a">来源库版本</div>
            <div class="col-sm-10">
                <select class="form-control" v-model="sync.sourceDbVersion">
                    <option value="" disabled>--选择版本--</option>
                    <option value="11x">Hbase1.1.x</option>
                </select>
            </div>
        </div>
        <div v-show="diySourceShowHbase" class="form-group">
            <div class="col-sm-1 control-label" style="color: #00a65a">读取模式</div>
            <div class="col-sm-10">
                <select class="form-control" v-model="sync.sourceMode">
                    <option value="normal" selected="selected">普通二维横表读取</option>
                    <option value="multiVersionFixedColumn">竖表读取</option>
                </select>
            </div>
        </div>
        <div v-show="isNoSupportTableField(sync.sourceDbType)" class="form-group">
            <div class="col-sm-1 control-label" style="color: #00a65a">映射字段</div>
            <div class="col-sm-10">
                <textarea v-show="!diySourceShowHbase" maxlength="2000" type="text" class="form-control" v-model="sync.sourceFieldStr" placeholder='请输入来源库表的字段列名，格式：[{"name":"列名","type":"string"}]'></textarea>
                <textarea v-show="diySourceShowHbase" maxlength="2000" type="text" class="form-control" v-model="sync.sourceFieldStr" placeholder='请输入来源库表的字段列名，格式：[{"name":"列名","type":"string"},{"name":"列名","type":"date","format":"yyyy-MM-dd"}]'></textarea>
            </div>
        </div>

        <!--************************数据过滤************************-->
        <div v-show="!showQuerySql && !diySourceShowMongo && !diySourceShowHive && !diySourceShowHbase" class="form-group">
            <div class="col-sm-1 control-label" style="color: #00a65a">数据过滤</div>
            <div class="col-sm-10">
                <textarea maxlength="2000" type="text" class="form-control" v-model="sync.whereSql" placeholder="请参考相应SQL语法填写where过滤语句（不要填写where关键字）。该过滤语句通常用作增量同步"></textarea>
            </div>
        </div>
        <div v-show="diySourceShowMongo" class="form-group">
            <div class="col-sm-1 control-label" style="color: #00a65a">表达式过滤</div>
            <div class="col-sm-10">
                <textarea maxlength="2000" type="text" class="form-control" v-model="sync.whereSql" placeholder="请参考collection.find({})find函数内的规则，用于mongodb正则表达式"></textarea>
            </div>
        </div>
        <!--************************数据过滤************************-->

        <div v-show="!showQuerySql && !isNoSupportSQL(sync.sourceDbType) && !diySourceShowHive" class="form-group">
            <div class="col-sm-1 control-label" style="color: #00a65a">切分键</div>
            <div class="col-sm-10">
                <input maxlength="20" type="text" class="form-control" v-model="sync.splitPk" placeholder="根据配置字段进行数据分片，实现并发读取"/>
                字段为字符串或Long类型，注意DataX按数据库字段类型分类：字符串不要有特殊字符，Long类型对应数据库字段为数值类型，否则会乱码!!!
                <!--(CHAR/NCHAR/VARCHAR/LONGVARCHAR/NVARCHAR)-->
                <!--(BIGINT/INTEGER/SMALLINT/TINYINT/NUMERIC)-->
            </div>
        </div>

        <!--hive begin-->
        <div v-show="showSourceField && diySourceShowHive" class="form-group">
            <div class="col-sm-1 control-label" style="color: #00a65a">自定义映射字段</div>
            <div class="col-sm-10">
                <textarea maxlength="2000" type="text" class="form-control" v-model="sync.sourceFieldStr" placeholder='来源库表的字段名value/index二选一，格式：[{"index":"索引指针","type":"string","name":"字段名"},{"value":"固定默认值","type":"string","name":"字段名"}]...'></textarea>
            </div>
        </div>
        <div v-show="diySourceShowHive" class="form-group">
            <div class="col-sm-1 control-label" style="color: #00a65a">文件类型</div>
            <div class="col-sm-10">
                <select class="form-control" v-model="sync.sourceFileType">
                    <option value="text">textfile</option>
                    <option value="orc">orcfile</option>
                </select>
            </div>
        </div>
        <div v-show="diySourceShowHive" class="form-group">
            <div class="col-sm-1 control-label" style="color: #00a65a">存储路径</div>
            <div class="col-sm-10">
                <input maxlength="100" type="text" class="form-control" v-model="sync.sourcePath" placeholder="Hive数据存储路径，默认：/user/hive/warehouse"/>
            </div>
        </div>
        <div v-show="diySourceShowHive" class="form-group">
            <div class="col-sm-1 control-label" style="color: #00a65a">分隔符</div>
            <div class="col-sm-10">
                <input maxlength="1" type="text" class="form-control" v-model="sync.sourceFieldDelimiter" placeholder="字段分隔符"/>
            </div>
        </div>
        <!--hive end-->
    </form>

    <form class="form-horizontal" style="width: 50%;float: left">
        <div class="trap ribbon-wrap">
            <div class="trap-ribbon">
                <a href="#">数据去向<i class="fa fa-github-alt"></i></a>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-1 control-label" style="color: red">目标源</div>
            <div class="col-sm-10">
                <select id="target_datasource_type" class="form-control" dict:select="" dictType="datasource_type" v-model="sync.targetDbType" @change="changeTargetDbType" default="--选择目标源类型--">

                </select>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-1 control-label" style="color: red">目标库</div>
            <div class="col-sm-10">
                <select class="form-control" v-model="sync.targetDb" @change="changeTargetDb">
                    <option value="" disabled>--选择目标库--</option>
                    <option v-for="option in targetDbList" v-bind:value="option.id">
                        {{ option.name }}
                    </option>
                </select>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-1 control-label" style="color: red">目标表</div>
            <div class="col-sm-10">
                <el-select
                    v-model="sync.targetTable"
                    @change="changeTargetTable"
                    style="width: 100%"
                    filterable
                    placeholder="--选择目标表--">
                    <el-option
                        v-for="option in targetTableList"
                        :key="option.tableName"
                        :label="option.tableName"
                        :value="option.tableName">
                    </el-option>
                </el-select>

            </div>
        </div>
        <div v-show="diyTargetShowHbase" class="form-group">
            <div class="col-sm-1 control-label" style="color: red">目标库版本</div>
            <div class="col-sm-10">
                <select class="form-control" v-model="sync.targetDbVersion">
                    <option value="" disabled>--选择版本--</option>
                    <option value="11x">Hbase1.1.x</option>
                </select>
            </div>
        </div>
        <div v-show="isNoSupportTableField(sync.targetDbType)" class="form-group">
            <div class="col-sm-1 control-label" style="color: red">映射字段</div>
            <div class="col-sm-10">
                <textarea v-show="!diyTargetShowHbase" maxlength="2000" type="text" class="form-control" v-model="sync.targetFieldStr" placeholder='请输入要同步到目标库表的字段列名，格式：[{"name":"列名","type":"string"}]'></textarea>
                <textarea v-show="diyTargetShowHbase" maxlength="2000" type="text" class="form-control" v-model="sync.targetFieldStr" placeholder='请输入要同步到目标库表的字段列名，格式：[{"name":"info:name","type":"string",index:0}]'></textarea>
            </div>
        </div>
        <div v-show="diyTargetShowHbase" class="form-group">
            <div class="col-sm-1 control-label" style="color: red">指定rowkey列</div>
            <div class="col-sm-10">
                <textarea maxlength="2000" type="text" class="form-control" v-model="sync.rowkeyColumn" placeholder='要写入的hbase的rowkey列，格式：[{"index":0,"type":"string"},{"index":-1,"type":"string",value:"常量index=-1"}]'></textarea>
            </div>
        </div>
        <div v-show="diyTargetShowHbase" class="form-group">
            <div class="col-sm-1 control-label" style="color: red">指定版本列</div>
            <div class="col-sm-10">
                <textarea maxlength="2000" type="text" class="form-control" v-model="sync.versionColumn" placeholder='指定写入hbase的时间戳。支持：当前时间、指定时间列，指定时间(index为－1；value：指定时间的值,long值)，三者选一。若不配置表示用当前时间，格式：{"index":0}'></textarea>
            </div>
        </div>

        <div v-show="!isNoSupportSQL(sync.targetDbType) && !diyTargetShowHive" class="form-group">
            <div class="col-sm-1 control-label" style="color: red">导入前准备语句</div>
            <div class="col-sm-10">
                <textarea maxlength="2000" type="text" class="form-control" v-model="sync.preSql" placeholder="请输入导入数据前执行的sql脚本,多个以;分割..."></textarea>
            </div>
        </div>
        <div v-show="diyTargetShowMongo" class="form-group">
            <div class="col-sm-1 control-label" style="color: red">导入前准备语句</div>
            <div class="col-sm-10">
                <textarea maxlength="2000" type="text" class="form-control" v-model="sync.preSql" placeholder="请输入导入数据前执行的drop或remove类型操作语句..."></textarea>
            </div>
        </div>
        <div v-show="!isNoSupportSQL(sync.targetDbType) && !diyTargetShowHive" class="form-group">
            <div class="col-sm-1 control-label" style="color: red">导入后完成语句</div>
            <div class="col-sm-10">
                <textarea maxlength="2000" type="text" class="form-control" v-model="sync.postSql" placeholder="请输入导入数据后执行的sql脚本,多个以;分割..."></textarea>
            </div>
        </div>

        <div v-show="showWriteMode" class="form-group">
            <div class="col-sm-1 control-label" style="color: red">冲突解决</div>
            <div v-show="!diyTargetShowMongo" class="col-sm-10">
                <select id="writeModeSelect" class="form-control" v-model="sync.writeMode">

                </select>
            </div>
            <div v-show="diyTargetShowMongo" class="col-sm-10">
                <input maxlength="20" type="text" class="form-control" id="writeModeInput" placeholder="相同记录时判断覆盖的主键字段（为空则不覆盖）"/>
            </div>
        </div>

        <div v-show="diyTargetShowHive" class="form-group">
            <div class="col-sm-1 control-label" style="color: red">文件类型</div>
            <div class="col-sm-10">
                <select class="form-control" v-model="sync.targetFileType">
                    <option value="text">textfile</option>
                    <option value="orc">orcfile</option>
                </select>
            </div>
        </div>

        <div v-show="diyTargetShowHive" class="form-group">
            <div class="col-sm-1 control-label" style="color: red">存储路径</div>
            <div class="col-sm-10">
                <input maxlength="100" type="text" class="form-control" v-model="sync.targetPath" placeholder="Hive数据存储路径，默认：/user/hive/warehouse"/>
            </div>
        </div>
        <div v-show="diyTargetShowHive" class="form-group">
            <div class="col-sm-1 control-label" style="color: red">分隔符</div>
            <div class="col-sm-10">
                <input maxlength="1" type="text" class="form-control" v-model="sync.targetFieldDelimiter" placeholder="字段分隔符"/>
            </div>
        </div>
        <div v-show="diyTargetShowHive" class="form-group">
            <div class="col-sm-1 control-label" style="color: red">文件名</div>
            <div class="col-sm-10">
                <input maxlength="100" type="text" class="form-control" v-model="sync.targetFileName" placeholder="文件名"/>
            </div>
        </div>
    </form>
</div>